<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" id="search">
    <ul class="list"></ul>
</body>
<script>

    const search = document.querySelector("#search");
    const list = document.querySelector(".list");

    search.oninput = function(){
        jsonp("https://suggest.taobao.com/sug", function(res){
            let str = ""
            res.result.forEach(val=>{
                str += `<li>${val[0]}</li>`
            })
            list.innerHTML = str;
        },{
            q: this.value,
            code: "utf-8",
            callback: "fn"
        })
    }

    function jsonp(url, success, data){
        // 解析数据
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        // 拼接地址
        url += "?" + str.slice(0,-1);
        // 创建script
        const script = document.createElement("script")
        script.src = url;
        document.body.appendChild(script);
        script.remove();
        // 定义全局函数
        window[data.callback] = function(res){
            success(res);
        }
    }

    
</script>
</html>